import React, { useState, useMemo } from 'react'
import { ReactSortable } from "react-sortablejs";
import Title from './components/Title'
import Swiper from './components/Swiper';
import Navigation from './components/Navigation';
import DisplayAdvertising from './components/DisplayAdvertising'
import Search from './components/Search';
import RichText from './components/RichText';
import SelectOperation from '../SelectOperation';
import Announcement from './components/Announcement';
import config from '../components.config'
import Audio from './components/Audio'
import Video from './components/Video'
import FormComponents from './components/Form'
import Shop from './components/Shop';
import ContactCustomer from './components/ContactCustomer'
import SecondKill from './components/SecondKill'
import './index.less'
const DraweiCenter = (props) => {
    const { data = {}, setData, sort } = props
    const { list = [] } = data
    const { fontColor, backgroundType, backgroundImage, backgroundRepeat, backgroundColor } = data
    const backgroundSet = () => {
        if (backgroundType === 'color') {
            return {
                background: backgroundColor
            }
        } else {
            const backObj = {
                background: `url(${backgroundImage})`,
                backgroundRepeat: backgroundRepeat
            }
            return backObj
        }
    }
    return <div className='center-preview-container'>
        <div style={backgroundSet()} className='main-preview-container'>
            <Title {...props}></Title>
            <div style={{ color: fontColor, height: '100%' }}>
                <ReactSortable
                    list={list}
                    animation={200}
                    group={{ name: "sort-field" }}
                    sort={true}
                    // forceFallback={true}
                    className="field-center"
                    setList={(e, o, i) => {
                        sort(e.map(val => {
                            const { dataIndex } = val
                            if (dataIndex) {
                                return {
                                    ...config[dataIndex]
                                }
                            }
                            return val
                        }))
                    }}>
                    {list.map((val, o) => {
                        const { type } = val
                        if (type === 'swiper') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Swiper data={val}></Swiper>
                            </SelectOperation>
                        } else if (type === 'navigation') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Navigation data={val}></Navigation>
                            </SelectOperation>
                        } else if (type === 'search') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Search data={val}></Search>
                            </SelectOperation>
                        } else if (type === 'displayAdvertising') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <DisplayAdvertising data={val}></DisplayAdvertising>
                            </SelectOperation>
                        } else if (type === 'richText') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <RichText data={val}></RichText>
                            </SelectOperation>
                        } else if (type === 'announcement') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Announcement data={val}></Announcement>
                            </SelectOperation>
                        } else if (type === 'audio') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Audio data={val}></Audio>
                            </SelectOperation>
                        } else if (type === 'video') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Video data={val}></Video>
                            </SelectOperation>
                        }
                        else if (type === 'form') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <FormComponents data={val}></FormComponents>
                            </SelectOperation>
                        } else if (type === 'shop') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <Shop data={val}></Shop>
                            </SelectOperation>
                        } else if (type === 'contactCustomer') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <ContactCustomer data={val}></ContactCustomer>
                            </SelectOperation>
                        } else if (type === 'secondKill') {
                            return <SelectOperation key={o} dataIndex={o} {...props}>
                                <SecondKill data={val}></SecondKill>
                            </SelectOperation>
                        }



                        return null
                    })
                    }
                </ReactSortable>
            </div>

        </div>

    </div >
}
export default DraweiCenter